<template>
	<view class="content">
		<uni-search-bar @confirm="searchCityBus" v-model="searchKey" />
		<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in lunboList" :key="index">
				<view class="swiper-item">
					<image :src="item.lunboimg" mode="" style="width: 100%;"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="weather"
		style="height: 100rpx; border: 1px solid #ccc; margin: 5px; border-radius: 5px; display: flex; justify-content: space-between; padding: 10rpx; align-items: center;">
		<view class="icon" style="width: 100rpx; height: 100rpx;">
			<image style="width: 100%; height: 100%;" :src="'/static/icons/' + weatherNow.icon + '.svg'" mode="">
			</image>
		</view>
		<view class="text" style="font-size: 50rpx; margin-left: 10px;">
			{{ weatherNow.temp }}°C
		</view>
		<view class="text" style="font-size: 34rpx; margin-left: 10rpx;">
			{{ weatherNow.text }}
		</view>
		<view class="text" style="margin-left: 10rpx;">
			{{ weatherNow.windDir }} {{ weatherNow.windScale }}级
		</view>
		<view>
			<view class="text" style="margin-left: 10rpx;">
				体感温度： {{ weatherNow.feelsLike }}°C
			</view>
			<view class="text" style="margin-left: 10rpx;">
				湿度： {{ weatherNow.humidity }}%
			</view>
		</view>
	</view>
	<uni-grid :show-border="false" :column="4" @change="changeGrid">
		<uni-grid-item v-for="(item, index) in gridData" :index="index" @tap="nav(index)">
			<view class="grid-item-box" style="background-color: #fff;">
				<img :src="item.icon" style="width: 20px;">
				<text class="text">{{ item.title }}</text>
			</view>
		</uni-grid-item>
	</uni-grid>
	<!-- 西安简介 -->
	<view class="xian-introduction">
		<text class="intro-title">西安简介</text>
		<view class="intro-content">
			<image class="intro-img" src="/static/images/xian.jpg" mode="aspectFill"></image>
			<text>西安，古称长安，作为十三朝古都，承载着厚重的历史文化底蕴。这里是丝绸之路的起点，东西方文化在此交融碰撞，孕育出独特的人文魅力。古老的城墙环绕着城市，犹如忠诚的卫士，见证着岁月的变迁。城内的古建筑星罗棋布，大雁塔、小雁塔等佛教圣地庄严肃穆，钟鼓楼在城市中心遥相呼应，敲响着历史的回声。传统与现代在这里和谐共生，古老的街巷中穿梭着现代的人群，美食的香气弥漫在每一个角落，羊肉泡馍、凉皮等特色小吃令人垂涎欲滴。</text>
		</view>
	</view>
	<!-- 娱乐项目简介 -->
	<view class="entertainment-list">
		<view class="entertainment-item" v-for="(item, index) in entertainmentData" :key="index">
			<view class="ent-pic">
				<image :src="item.img" mode="aspectFill" class="intro-img"></image>
			</view>
			<view class="ent-text">
				<view class="ent-title">{{ item.name }}</view>
				<view class="ent-msg">{{ item.description }}</view>
			</view>
		</view>
	</view>
	<view class="member-info">
	       <text class="info-title">小组成员及分工：</text>
	       <text>施星雨：首页游玩页面</text>
	       <text>郝玉青：首页中的电影运势天气景点</text>
	       <text>徐雪辉：问答我的</text>
	   </view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		CONFIG
	} from '../../utils/config';
	import {
		userStore
	} from '../../store/userStore';

	const pages = [
		'/pages/dianyingDetails/dianyingDetails',
		'/pages/meijingDetails/meijingDetails',
		'/pages/yunshiDetails/yunshiDetails',
		'/pages/tianqiDetails/tianqiDetails'
	];
	let store = userStore();

	onLoad(() => {
		getLunbo();
		getWeather();
		getPos();
	});

	let lunboList = ref([]);
	async function getLunbo() {
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/lunbo");
		console.log(res);
		lunboList.value = res.results;
	}

	let searchKey = ref("");

	function searchCityBus() {
		if (searchKey.value == "") {
			uni.showToast({
				title: "请输入搜索线路名称",
				icon: "none"
			});
		} else {
			let url = `https://uri.amap.com/line?name=${searchKey.value}&city=029&callnative=0`;
			window.location.href = url;
		}
	}

	// 获取当前位置坐标
	function getPos() {
		console.log("getpos");
		uni.getLocation({
			success: function(res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				// 将定位保存到状态库
				store.savePos(res.longitude, res.latitude);
				console.log(store.currentPos);
			}
		});
	}

	function nav(index) {
		console.log("点击了详情:" + index);
		// 检查索引是否在数组范围内
		if (index >= 0 && index < pages.length) {
			// 跳转到对应的页面
			uni.navigateTo({
				url: pages[index] + "?id=" + index
			});
		} else {
			console.error("索引超出范围");
		}
	}

	let weatherNow = ref({});
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_now, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location
		});
		if (res.code == 200) {
			weatherNow.value = res.now;
			console.log(res.now);
		}
	}

	let gridData = [{
			title: '电影',
			icon: 'static/icon/dianying.png'
		},
		{
			title: '美景',
			icon: 'static/icon/jingdian.png'
		},
		{
			title: '运势',
			icon: 'static/icon/jinriyunshi.png'
		},
		{
			title: '天气',
			icon: 'static/icon/tianqiyubao.png'
		}
	];

	// 新增：娱乐项目相关数据
	const entertainmentData = reactive([{
			name: '大唐不夜城夜游',
			img: '/static/images/datangbuyecheng.jpg',
			description: '夜幕低垂，华灯初上，步入大唐不夜城，瞬间仿若穿越千年时光，重回那繁华鼎盛的大唐盛世。街道两旁，仿唐建筑金碧辉煌，灯火璀璨，身着古装的舞者长袖善舞，墨客吟诗作画，街头表演精彩纷呈，沉浸式体验一场盛世狂欢，感受古代与现代交织的独特魅力。'
		},
		{
			name: '西安城墙骑行',
			img: '/static/images/chengqiangqixing.jpg',
			description: '租一辆单车，沿着雄伟古朴的西安城墙悠然骑行，微风拂面，一侧是城内古色古香的传统街巷，烟火袅袅，生活气息浓郁；另一侧则是城外车水马龙的现代都市风光，古今交融，在这独特的路线上领略岁月沉淀与城市脉搏的跳动。'
		},
		{
			name: '回民街美食探秘',
			img: '/static/images/huiminjie.jpg',
			description: '踏入回民街，浓郁醇厚的美食香气扑鼻而来，瞬间勾起味蕾的无限欲望。这里汇聚了琳琅满目的西安特色小吃，从热气腾腾、料重味醇的羊肉泡馍，到爽滑劲道、酸辣可口的麻酱凉皮，再到酥脆可口的肉夹馍，每一口都是地道的西安味道，每一步都是浓郁的市井风情画卷。'
		},
		{
			name: '大雁塔音乐喷泉',
			img: '/static/images/penquan.jpg',
			description: '大雁塔北广场的音乐喷泉是亚洲最大的矩阵喷泉，喷泉随着音乐的节奏变幻出各种造型，与古老的大雁塔相映成趣，是游客必去的景点之一。'
		}
	]);
</script>
<style scoped>
    /* 页面整体容器样式 */
   .page-container {
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
        padding: 10px;
    }

    /* 搜索栏所在内容区域样式 */
   .content {
        background-color: #f0f8ff; /* 淡蓝色底色 */
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    /* 轮播图样式 */
   .swiper-container {
        width: 100%;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

   .swiper-item image {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 10px;
    }

    /* 天气信息样式 */
   .weather {
        background-color: #98fb98; /* 淡绿色底色 */
        display: flex;
        align-items: center;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

   .weather.icon image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    /* 网格布局样式 */
   .uni-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-bottom: 10px;
        background-color: #ffe4e1; /* 淡粉色底色 */
        padding: 10px;
        border-radius: 10px;
    }

   .grid-item-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

   .grid-item-box img {
        width: 30px;
        height: 30px;
        margin-bottom: 5px;
    }

    /* 西安简介样式 */
   .xian-introduction {
        background-color: #ffffe0; /* 淡黄色底色 */
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

   .intro-title {
        font-size: 18px;
        font-weight: bold;
        color: #ff6347;
        margin-bottom: 5px;
    }

   .intro-content {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

   .intro-img {
        width: 100px;
        height: 100px;
        border-radius: 5px;
    }

    /* 娱乐项目简介样式 */
   .entertainment-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 10px;
        background-color: #add8e6; /* 浅蓝色底色 */
        padding: 10px;
        border-radius: 10px;
    }

   .entertainment-item {
        background-color: #fff;
        border-radius: 5px;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

   .ent-pic {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 5px;
        margin-bottom: 5px;
    }

   .ent-text {
        text-align: center;
    }

   .ent-title {
        font-size: 16px;
        font-weight: bold;
        color: #1e90ff;
        margin-bottom: 5px;
    }

   .ent-msg {
        font-size: 14px;
        color: #333;
    }

    /* 小组成员及分工信息样式 */
   .member-info {
        background-color: #e6e6fa; /* 淡紫色底色 */
        border-radius: 5px;
        padding: 10px;
        margin-top: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

   .info-title {
        font-size: 16px;
        font-weight: bold;
        color: #800080;
        margin-bottom: 5px;
    }
</style>